import '../../styles/login.less';
import React from 'react';
import { Button, Form } from 'react-bootstrap';

interface Iprops {
  size: string
}

interface IState {
  n: number,
  account: String,
  pass: String
}

export default class Login extends React.Component<Iprops, IState> {

  accountRef: React.RefObject<HTMLInputElement>;

  passRef: React.RefObject<HTMLInputElement>;

  // 初始化页面常量 绑定事件方法
  constructor(props:Iprops, context:any) {
    super(props)
    this.accountRef = React.createRef();
    this.passRef = React.createRef();
    this.state = {
     n: 1,
     account: "",
     pass: ""
    }
  }

  componentDidMount()
  {

  }

  componentWillMount() {
    
  }

  enter(e:any) {
    console.log(this.accountRef.current?.value)
    console.log(this.passRef.current?.value)
  }

  onFormSubmit(e:React.FormEvent<HTMLFormElement>) {
    // 阻止表单提交
    e.preventDefault();
    console.log(this.state)
  }

  accountChange(e:React.ChangeEvent<any>) {
    console.log(e.target.value)
  }

  render() {
    return (
        <div className="login-box">
          
            <Form>
            <fieldset>
                <Form.Group className="mb-3">
                  <Form.Label>账号</Form.Label>
                  <Form.Control onChange={(e) => this.accountChange(e)} name="account" type="text" ref={this.accountRef} />
                </Form.Group>
                <Form.Group className="mb-3">
                  <Form.Label>密码</Form.Label>
                  <Form.Control name="pass" type="password" ref={this.passRef} />
                </Form.Group>
                <Button onClick={(e) => this.enter(e)} type="submit">登陆</Button>
              </fieldset>
            </Form>
        </div>
    )
  }

}